<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../img/asset-favico.ico">
        <title>传智健康</title>
        <link rel="stylesheet" href="../css/page-health-index.css" />
        <link rel="stylesheet" href="../css/page-health-login.css" />
        <link rel="stylesheet" href="../plugins/elementui/index.css" />
        <script src="../plugins/jquery/dist/jquery.min.js"></script>
        <script src="../plugins/healthmobile.js"></script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <script src="../plugins/elementui/index.js"></script>
    </head>
    <body data-spy="scroll" data-target="#myNavbar" data-offset="150">
        <div class="app">
            <!-- 页面头部 -->
            <div class="top-header">
                <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
                <span class="center">传智健康</span>
                <span class="f-right"><i class="icon-more"></i></span>
            </div>
            <div class="carousel">
                <div class="banner-roll">
                    <div class="banner-item">
                        <div class="item" style="background-image: url(../img/widget-banner_01.png);"><img src="../img/widget-banner_01.png" alt=""></div>
                        <div class="item" style="background-image: url(../img/widget-banner_02.png);"><img src="../img/widget-banner_02.png" alt=""></div>
                        <div class="item" style="background-image: url(../img/widget-banner_03.png);"><img src="../img/widget-banner_03.png" alt=""></div>
                    </div>
                    <div class="indicators"></div>
                </div>
            </div>
            <!-- 页面内容 -->
            <div class="contentBox">
                <div class="list-column2">
                    <ul class="list">
                        <li class="type-item">
                            <a href="/pages/setmeal.html" class="link-page">
                                <div class="type-title">
                                    <h3>体检预约</h3>
                                    <p>实时预约</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-zhen">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="/pages/checkrecord_list.html" class="link-page">
                                <div class="type-title">
                                    <h3>报告查询</h3>
                                    <p>一键查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-search"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="health-risk.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康评估</h3>
                                    <p>了解自身健康</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-star"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="health-intervention.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康干预</h3>
                                    <p>采集状况</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-plus"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="health-record.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康档案</h3>
                                    <p>掌上查询</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-record"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
                                </div>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="health-information.html" class="link-page">
                                <div class="type-title">
                                    <h3>健康咨询</h3>
                                    <p>咨询一览</p>
                                </div>
                                <div class="type-icon">
                                    <i class="icon-person"><span class="path1"></span><span class="path2"></span></i>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="img-parent">
                    <img src="../img/asset-ad.png" width="100%" height="100%" />
                </div>
            </div>
        </div>
        <script>
            $(function() {
                var ht = $('.banner-item').find('img').eq(0).height()
                var tg = $('.banner-item .item');
                var num = 0;
                for (i = 0; i < tg.length; i++) {
                    $('.indicators').append('<span></span>');
                    $('.indicators').find('span').eq(num).addClass('active');
                }
                $(".banner-item,.banner-roll").css('height', ht)

                function roll() {
                    tg.eq(num).animate({
                        'opacity': '1',
                        'z-index': num
                    }, 2000).siblings().animate({
                        'opacity': '0',
                        'z-index': 0
                    }, 2000);
                    $('.indicators').find('span').eq(num).addClass('active').siblings().removeClass('active');
                    if (num >= tg.length - 1) {
                        num = 0;
                    } else {
                        num++;
                    }
                }
                $('.indicators').find('span').click(function() {
                    num = $(this).index();
                    roll();
                });
                var timer = setInterval(roll, 3000);
                $('.banner-item').mouseover(function() {
                    clearInterval(timer)
                });
                $('.banner-item').mouseout(function() {
                    timer = setInterval(roll, 3000)
                });
            })
            $(window).resize(function() {
                var ht = $('.banner-item').find('img').eq(0).height()
                $(".banner-item,.banner-roll").css('height', ht)
            });
        </script>
    </body>
</html>